<template>
  <div class="img-el">
    <el-image
      class="el-upload-list__item-thumbnail image-empty"
      v-bind="$attrs"
      :src="src"
      @load="isLoad = true"
    />
    <!-- 被禁用时并且图片加载识别时不会移动到图片上不会有遮罩出现 -->
    <span v-if="!disabled || isLoad" class="el-upload-list__item-actions">
      <!-- 图片加载失败不显示预览按钮 -->
      <span
        v-if="isLoad"
        class="el-upload-list__item-preview"
        @click="isShow = true"
      >
        <i class="el-icon-zoom-in"></i>
      </span>
      <!-- 禁用时不显示删除按钮 -->
      <span
        v-if="!disabled"
        class="el-upload-list__item-delete"
        @click="onRemoveClick"
      >
        <i class="el-icon-delete"></i>
      </span>
    </span>
    <!-- 预览图片组件 -->
    <el-image-viewer
      v-if="isLoad && isShow"
      :on-close="onClose"
      :url-list="[src]"
    />
  </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
/**
 * @description 支持显示和预览图片，会显示一个删除按钮
 * 图片加载失败不会显示预览按钮
 */
export default defineComponent({
  name: 'UxImage',
  components: { ElImageViewer },
  props: {
    src: {
      type: String,
      default: ''
    },
    /**
     * @description 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 是否预览图片
      isShow: false,
      // 图片是否加载成功
      isLoad: false
    };
  },
  methods: {
    // 关闭预览
    onClose() {
      this.isShow = false;
    },
    onRemoveClick() {
      // 点击删除按钮时抛出事件
      this.$emit('remove', this.src);
    }
  }
});
</script>
<style scoped>
.img-el {
  width: 100%;
  height: 100%;
}
</style>
